<template>
  <div>
    <div class="content">
      <el-row class="tac">
        <el-col :span="12">
          <div class="title" :style="{ width: isCollapse ? '116px' : '260px' }">
            <img src="@/assets/logo_82x82.png" />
            <div v-if="!isCollapse">监考系统</div>
          </div>
          <div
            style="text-align: right; margin-bottom: 10px"
            :style="{ width: isCollapse ? '68px' : '224px' }"
          >
            <el-icon
              @click="isExpand"
              color="#FFF"
              size="20px"
              v-if="isCollapse"
              ><Expand
            /></el-icon>
            <el-icon @click="isExpand" color="#FFF" size="20px" v-else
              ><Fold
            /></el-icon>
          </div>
          <el-menu
            active-text-color="#1890ff"
            background-color="#2a354e"
            text-color="#fff"
            class="el-menu-vertical-demo"
            :style="{ width: isCollapse ? '117px' : '261px' }"
            :collapse="isCollapse"
            active-color="#1890ff"
            default-active="1-1"
            :collapse-transition="false"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Histogram /></el-icon>
                <span>选择考场</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="PrivilegeClick"
                  >开启试考</el-menu-item
                >
                <el-menu-item index="1-2">考场名称</el-menu-item>
                <el-menu-item index="1-3">考场管理秘钥</el-menu-item>
                <el-menu-item index="1-4">考试签到</el-menu-item>
                <el-menu-item index="1-5">考场监考</el-menu-item>
                <el-menu-item index="1-6">线下/线上</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><TrendCharts /></el-icon>
                <span>绑定考试机</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="BindingMachineClick"
                  >绑定考试机操作</el-menu-item
                >
                <el-menu-item index="2-2">自定义名称</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Tools /></el-icon>
                <span>试考</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1" @click="TestExamClick"
                  >试考操作</el-menu-item
                >
                <el-menu-item index="3-2">自定义名称</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-row>
      <div style="width: 100%; height: 100%; background-color: #eeeff5">
        <div
          style="background-color: #fff; width: 100%; height: 70px"
          class="header"
        >
          <el-icon color="#999999" size="18px"><Search /></el-icon>
          <el-icon
            color="#999999"
            style="margin-left: 26px; margin-right: 36px"
            size="18px"
            ><Bell
          /></el-icon>
          <div class="touxiang">
            <img
              style="
                width: 36px;
                height: 36px;
                background-image: linear-gradient(
                  90deg,
                  #067c6e 0%,
                  #1b1f2a 100%
                );
              "
              src="@/assets/touxiang_36x36.png"
            />
            <div style="margin-left: 12px; margin-right: 16px">少年的你</div>
            <el-icon color="#cccccc" size="16px" v-if="true"
              ><CaretBottom
            /></el-icon>
            <el-icon color="#cccccc" size="16px" v-else><CaretTop /></el-icon>
          </div>
          <el-icon
            style="margin-right: 30px; margin-left: 36px"
            color="#1890ff"
            size="18px"
            @click="exit"
            ><SwitchButton
          /></el-icon>
        </div>
        <div style="padding-left: 26px; padding-right: 26px; padding-top: 20px">
          <BindingMachine v-if="isBindingMachine"></BindingMachine>
          <Privilege v-if="isPrivilege"></Privilege>
          <TestExam v-if="isTestExam"></TestExam>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted, getCurrentInstance } from "vue";
import {
  Document,
  Menu as IconMenu,
  TrendCharts,
  Expand,
  Fold,
  Histogram,
  Tools,
  Search,
  Bell,
  CaretBottom,
  CaretTop,
  SwitchButton,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import BindingMachine from "./BindingMachine.vue";
import Privilege from "./privilege.vue";
import TestExam from "./testExam.vue";
const { proxy }: any = getCurrentInstance();
const router = useRouter();
let isBindingMachine = ref(false);
let isPrivilege = ref(true);
let isTestExam = ref(false);
const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const PrivilegeClick = () => {
  isPrivilege.value = true;
  isBindingMachine.value = false;
  isTestExam.value = false;
};
const BindingMachineClick = () => {
  isBindingMachine.value = true;
  isPrivilege.value = false;
  isTestExam.value = false;
};
const TestExamClick = () => {
  isTestExam.value = true;
  isBindingMachine.value = false;
  isPrivilege.value = false;
};
// 展开菜单事件
const start = ref("flex-start");
const isExpand = () => {
  if (isCollapse.value == false) {
    start.value = "center";
    isCollapse.value = true;
  } else {
    start.value = "flex-start";
    isCollapse.value = false;
  }
};
// 退出登录点击事件
const exit = () => {
  proxy.$http
    .post("/invigilate/examinee/user/loginOut", {
      Token: window.sessionStorage.getItem("token"),
      Uid: window.sessionStorage.getItem("uid"),
    })
    .then((res: any) => {
      console.log(res.data);
      if (res.data == true) {
        sessionStorage.setItem("token", "");
        sessionStorage.setItem("uid", "");
        router.push("/");
      } else {
        ElMessage.error("操作失败!");
      }
    });
};
</script>

<style lang='scss' scoped>
.el-menu-vertical-demo {
  width: 200px;
  height: 100%;
}
.content {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  width: 100vw;
  background: #2a354e;
  box-sizing: border-box;
  overflow: hidden;
}
.tac {
  margin-right: 26px;
  height: 100%;
}
.el-menu-vertical-demo {
  width: 261px;
  background: #2a354e;
  height: 100%;
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  width: 260px;
  background: #2a354e;
  margin-bottom: 26px;
  box-sizing: border-box;

  & > img {
    width: 60px;
    height: 60px;
  }
  & > div {
    font-family: SourceHanSansCN-Medium;
    font-size: 22px;
    color: #fff;
    margin-left: 26px;
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .touxiang {
    display: flex;
    align-items: center;
  }
}
</style>
<style lang="less">
.el-sub-menu__title {
  justify-content: v-bind(start);
}
.el-menu {
  border-right: none;
}
</style>